<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频练习</title>
<style>
*{margin:0;padding: 0;list-style: none;}
/* html,body{
  height: 100%;
  overflow: hidden;
} */
#wrap{
  height: 100%;
  height: 800px;
  background:steelblue;
}
#myVideo{
  display: block;
  margin:0 auto; 
}
footer{
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0px;
  background: black;
  position: relative;
}
.play{
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 20px;
}
.play span{
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  margin-right: 20px;
  background-repeat: no-repent;
  display:inline-block;
}
.playPause{
  background:rgb(235, 220, 135);
}
.stop{
  color: #fff;
  background: red;
} 
#sp{
  width: 10%;
  height: 100%;
  background: red; 
}
.shijian{
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: rgba(100,100,100,0.6);
  color: #fff;
  position: absolute;
  right: 100px;
  top: 0px;
}

</style>    
</head>
<body>

<section id="wrap">
  <video id="myVideo" controls loop>
    <source src="./img/萧全 - 社会摇.mkv">
  </video>
  
  <div class="play">
    <span class="playPause">播放/暂停</span>
    <span class="stop">停止</span>
  </div> 
 </section>

  <footer> 
    <div id="sp"></div>
    <div class="shijian">
      <span class="shi1"></span>
      <span>/</span>
      <span class="shi2"></span>
    </div>
  </footer>

</body>
<script src="./jq3.js"></script>
<script>


//进度条
var fot = document.querySelector('footer')
var time = document.querySelector('.shijian');



//点击
fot.onmousedown = function(e){
  var sp_l = e.pageX - this.dffsetLeft;
  var sp_w = $(this).width();
  
 

}
//滑过
fot.onmousemove = function(){

}
//离开
fot.onmouseout = function(){

}


//暂停播放
var pause = document.querySelector('.playPause')
var stops = document.querySelector('.stop')  
var av = document.querySelector('#myVideo')

pause.onclick = function(){
  if(av.paused){
    av.play();
  }else{
    av.pause();
  }
 
}
//停止
stops.onclick = function(){
  av.currentTime = 0;
}


























 // 根据秒数转化成时间
//  function formatSeconds(value) {
//         var second = parseInt(value);// 秒
//         var minute= 0;// 分
//         var hour= 0;// 小时
//         if(second > 60) {
//             minute= parseInt(second/60);
//             second = parseInt(second%60);
//             if(minute> 60) {
//                 hour= parseInt(minute/60);
//                 minute= parseInt(minute%60);
//             }
//         }
//         if(second < 10) second="0"+second;
//         if(minute < 10) minute="0"+minute;
//         var result = minute+":"+second
//         if(hour> 0) {
//             result = hour+":"+result
//         }
//         return result;
//     }

</script>
</html>